<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            @conditionChange="selectGroupChange($event)"
            :key="queryInfo.key"
          >
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-operate">
        <a-button
          @click="handleWrapPage({}, 1)"
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
          v-action="'table_add_' + pageModule"
        >
          新增
        </a-button>
      </div>
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column
            type="seq"
            width="80"
            title="序号"
            fixed="left"
          ></vxe-column>
          <vxe-column
            field="proName"
            title="项目名称"
            width="300"
            align="left"
            fixed="left"
          >
          </vxe-column>
          <vxe-column
            :field="item.key"
            :title="item.title"
            v-for="(item, index) in columns"
            :key="index"
          >
            <template #default="{ row }">
              <div class="files-icon">
                <a-tooltip placement="top">
                  <template slot="title">
                    预览
                  </template>
                  <a-icon
                    type="eye"
                    class="preview-btn"
                    :class="[
                      row[item.key] &&
                        row[item.key]['fileIdInfo'].length == 0 &&
                        'disabled',
                    ]"
                    @click="handelFileModal(row[item.key], item)"
                  />
                </a-tooltip>
                <a-tooltip placement="top" v-action="'down_load_' + pageModule">
                  <template slot="title">
                    下载
                  </template>
                  <a-icon
                    type="download"
                    class="download-btn"
                    :class="[
                      row[item.key] &&
                        row[item.key]['fileIdInfo'].length == 0 &&
                        'disabled',
                    ]"
                    @click="downloadFile(row[item.key], item)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="creator" title="创建人" fixed="right">
          </vxe-column>
          <vxe-column field="createTime" title="创建时间" fixed="right">
          </vxe-column>
          <vxe-column field="operate" width="120" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="file-search" @click="handleWrapPage(row, 3)" />
                </a-tooltip>
                <!-- 编辑 -->
                <a-tooltip
                  placement="top"
                  v-action="'table_edit_' + pageModule"
                >
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon
                    type="edit"
                    class="edit-btn"
                    @click="handleWrapPage(row, 2)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 新增/编辑/查看 -->
    <wrapPage
      :key="wrapPage.key"
      :visible.sync="wrapPage.visible"
      :parameter="wrapPage.row"
      :pageOperate="wrapPage.operate"
    ></wrapPage>
    <!-- 查看附件 -->
    <viewFileModal
      :visible.sync="viewFileModal.visible"
      :fileList="viewFileModal.fileList"
      :classifyId="viewFileModal.classifyId"
      :subtitle="viewFileModal.name"
    ></viewFileModal>
  </div>
</template>

<script>
// 工程勘察
import wrapPage from "./wrapPage.vue";
import viewFileModal from "./viewFileModal.vue";
import { _getUUID } from "@/utils/util.js";
import { downLoadBatchFileByArraybuffer } from "@/utils/TopVUI";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
import {
  getDynamicsHeader,
  pageDynamicsBody,
  exportZip,
} from "@/api/constructManage";

export default {
  provide() {
    return {
      moduleSource: () => this.pageModule,
    };
  },
  components: {
    wrapPage,
    viewFileModal,
    ScreenConditions,
    AssociativeSelectGroup,
  },
  props: {
    pageModule: {
      type: [Number, String],
      default: 1,
    },
  },
  data() {
    return {
      selectMap: [
        //项目
        {
          type: "proCode",
          mode: "default",
          placeholder: "请选择项目",
          allowClear: true,
        },
      ],
      conditionsData: {},
      queryInfo: {
        key: _getUUID(),
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      columns: [],
      // 新增/编辑/查看
      wrapPage: {
        visible: false,
        key: _getUUID(),
        row: {},
        operate: 1,
      },
      //查看附件
      viewFileModal: {
        classifyId: "",
        name: "",
        visible: false,
        fileList: [],
      },
    };
  },
  methods: {
    // 新增/编辑/查看
    handleWrapPage(row, operate) {
      this.wrapPage.operate = operate;
      this.wrapPage.row = row;
      this.wrapPage.key = _getUUID();
      this.wrapPage.visible = true;
    },

    //预览
    handelFileModal(row, item) {
      let { fileIdInfo = [], classifyId } = row;
      if (fileIdInfo.length == 0) {
        return;
      }
      this.viewFileModal.name = item.title;
      this.viewFileModal.classifyId = classifyId;
      this.viewFileModal.fileList = fileIdInfo ?? [];
      this.viewFileModal.visible = true;
    },

    //下载
    downloadFile(row, item) {
      let { classifyId, fileIdInfo = [] } = row;
      let { title } = item;
      if (fileIdInfo.length == 0) {
        return;
      }
      exportZip({ classifyId })
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, title);
        })
        .catch((_) => {});
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    reset() {
      this.queryInfo.key = _getUUID();
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.pager.page = 1;
      Promise.all([this.getColumnsHeader(), this.getTableData()]);
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询表头
    getColumnsHeader() {
      let { proCode = "" } = this.conditionsData;
      return new Promise((resolve, reject) => {
        getDynamicsHeader({ type: this.pageModule, proCode })
          .then((res) => {
            let source = res?.data ?? [];
            this.columns = [];
            source.forEach((v) => {
              this.columns.push({
                key: v.key,
                title: v.name,
                width: 100,
              });
            });
            resolve();
          })
          .catch((_) => {
            this.columns = [];
            reject();
          });
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proCode = "" } = this.conditionsData;
      return new Promise((resolve, reject) => {
        pageDynamicsBody({
          page,
          pageSize,
          proCode,
          type: this.pageModule,
        })
          .then((res) => {
            this.tableData = res?.data?.rows || [];
            this.pager.total = res?.data?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped></style>
